<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型</td>
                </tr>
                <tr>
                    <td>
                        <select v-model="queryinfo.HouleId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.list">{{ item.HouseName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>房间号码</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="queryinfo.NumNo"/>
                    </td>
                </tr>

                <tr>
                    <td>房型描述</td>
                </tr>
                <tr>
                    <td><textarea v-model="queryinfo.Miaoshuno"></textarea></td>
                </tr>

                <tr>
                    <td>状态</td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="queryinfo.State"/>上架
                        <input type="radio" name="idsss" :value="0" v-model="queryinfo.State"/>下架
                    </td>
                </tr>
                <tr>
                    <td><input type="button" value="添加" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo=reactive({
  "HouleId": '',
  "NumNo": '',
  "Miaoshuno": "",
  "State": 0,
})

let data:any=reactive({
    list:[],
})
onMounted(()=>{
    getlist();
})

const getlist=()=>{
    axios({
        url:'/api/Houle/GetHoule',
        method:'get',
        params:{pagesize:100}
    })
    .then(res=>{
        console.log(res);
        data.list=res.data.list;
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    if(queryinfo.HouleId==""){
        alert('房型不能为空');
        return;
    }
    if(queryinfo.NumNo==""){
        alert('房间号码不能为空');
        return;
    }
    if(queryinfo.Miaoshuno==""){
        alert('描述不能为空');
        return;
    }
    axios({
        url:'/api/HouleNo/AddHouleno',
        method:'post',
        data:queryinfo
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            router.push('houlenolist');
        }
        else{
            alert('添加失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>